<template>
    <div class="error-container">
        <el-table :data="list"
                  v-loading="listLoading"
                  element-loading-text="给我一点时间"
                  border fit
                  highlight-current-row
                  @selection-change="handleSelectionChange"
                  :reloadTable="reloadTable"
                  style="width: 100%">

            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="操作类型">
                            <span>{{ props.row.actionType }}</span>
                        </el-form-item>
                        <el-form-item label="操作描述">
                            <span>{{ props.row.actionDesc }}</span>
                        </el-form-item>
                        <el-form-item label="操作权限值">
                            <span>{{ props.row.permission }}</span>
                        </el-form-item>
                        <el-form-item label="操作用户">
                            <span>{{ props.row.operatorUser }}</span>
                        </el-form-item>
                        <el-form-item label="操作时间">
                            <span>{{ props.row.operatorTime }}</span>
                        </el-form-item>
                        <el-form-item label="操作对象">
                            <span>{{ props.row.targetObject }}</span>
                        </el-form-item>
                        <el-form-item label="IP地址">
                            <span>{{ props.row.requestIp }}</span>
                        </el-form-item>
                        <el-form-item label="URI">
                            <span>{{ props.row.requestUri }}</span>
                        </el-form-item>
                        <el-form-item label="URL">
                            <span>{{ props.row.requestUri }}</span>
                        </el-form-item>
                        <el-form-item label="请求方式">
                            <span>{{ props.row.requestMethod }}</span>
                        </el-form-item>
                        <el-form-item label="终端类型">
                            <span>{{ props.row.terminalType }}</span>
                        </el-form-item>
                        <el-form-item label="平台类型">
                            <span>{{ props.row.platformType }}</span>
                        </el-form-item>
                        <el-form-item label="平台系统">
                            <span>{{ props.row.platformOs }}</span>
                        </el-form-item>
                        <el-form-item label="浏览器类型">
                            <span>{{ props.row.browserType }}</span>
                        </el-form-item>
                        <el-form-item label="浏览器版本">
                            <span>{{ props.row.browserVersion }}</span>
                        </el-form-item>
                        <el-form-item label="浏览器内核">
                            <span>{{ props.row.browserKernel }}</span>
                        </el-form-item>
                        <el-form-item label="浏览器标识">
                            <span>{{ props.row.userAgent }}</span>
                        </el-form-item>
                        <el-form-item label="表单参数">
                            <span>{{ props.row.formParams }}</span>
                        </el-form-item>
                        <el-form-item label="查询参数">
                            <span>{{ props.row.queryParams }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column label="序号" width="65" align="center">
                <template slot-scope="scope"> {{scope.row.id}} </template>
            </el-table-column>

            <el-table-column label="操作类型" min-width="80px" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.actionType | actionTypeTagFilter">{{scope.row.actionType}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作描述" :show-overflow-tooltip="true" min-width="200px" align="center">
                <template slot-scope="scope"> {{scope.row.actionDesc}} </template>
            </el-table-column>

            <el-table-column label="IP地址" min-width="80px" align="center">
                <template slot-scope="scope"> {{scope.row.requestIp}} </template>
            </el-table-column>

            <el-table-column label="请求URI" :show-overflow-tooltip="true" min-width="200px" align="center">
                <template slot-scope="scope"> {{scope.row.requestUri}} </template>
            </el-table-column>

            <el-table-column label="异常信息":show-overflow-tooltip="true" min-width="300px" align="center">
                <template slot-scope="scope"> {{scope.row.exceptionShort}} </template>
            </el-table-column>

            <el-table-column label="操作用户" min-width="100px" align="center">
                <template slot-scope="scope"> {{scope.row.operatorUser}} </template>
            </el-table-column>

            <el-table-column label="操作时间" width="180px" align="center">
                <template slot-scope="scope"> {{scope.row.operatorTime}} </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listQuery.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="listQuery.rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'

    import { deletedError, fetchErrorObject, fetchErrorList } from '@/api/system/logger'
    export default {
        name: 'error',
        data() {
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    rows: 10,
                    orderByEexception: 'operator_time desc'
                },
                multipleSelection: [],
                dialogDetailVisible: false,
            }
        },
        created() {
            this.getList()
        },
        computed: {
            ...mapGetters([
                'loggerSelection'
            ]),
            reloadTable() {

                if(this.loggerSelection.query) {
                    this.listQuery = Object.assign(this.listQuery, this.loggerSelection.query)
                    this.$store.commit('LOGGER_SELECTION', {type: 'error', items: null, action: !this.loggerSelection.action, query: null})
                    this.getList()
                } else {
                    if(this.loggerSelection.action) {
                        this.$store.commit('LOGGER_SELECTION', {type: 'error', items: null, action: !this.loggerSelection.action})
                        this.getList()
                    }

                }

            }
        },
        filters: {
            actionTypeTagFilter(actionType) {
                const actionTypeArray = ['gray', 'primary', 'info', 'success', 'warning', 'danger']
                if(actionType === '添加') {
                    return actionTypeArray[3]
                } else if(actionType === '修改') {
                    return actionTypeArray[4]
                } else if(actionType === '删除') {
                    return actionTypeArray[5]
                } else if(actionType === '查询') {
                    return actionTypeArray[1]
                } else if(actionType === '业务操作') {
                    return actionTypeArray[0]
                }
            }
        },
        methods: {
            getList() {
                this.listLoading = true
                fetchErrorList(this.listQuery).then(response => {
                    this.list = response.data.list
                    this.total = response.data.total
                    this.listLoading = false
                }).catch((error)=>{
                    console.log(Error)
                    this.listLoading = false
                })
            },
            handleSizeChange(val) {
                this.listQuery.rows = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.$store.commit('LOGGER_SELECTION', {type: 'error', items: this.multipleSelection, action: false})
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>